<template>
  <button @click="push">push</button>
  <button @click="pop">pop</button>
  <transition-group
    leave-active-class="animate__animated animate__backOutDown"
    enter-active-class="animate__animated animate__backInDown"
    appear
    appear-active-class="animate__animated animate__rubberBand"
  >
    <h1 v-for="item in list" :key="item">{{ item }}</h1>
  </transition-group>
</template>
<script setup lang="ts">


// transition-group 组件：配合 v-for 循环渲染列表，当列表中的项产生或销毁时，为其添加进入或离开动画
// 使用与 transition 组件一致，会为每个列表项设置对应的动画效果

import { reactive } from 'vue'
import 'animate.css'
const list = reactive<number[]>([1, 2, 3, 4, 5, 6])
// 定义点击 push 按钮事件的处理函数 push 为添加数组末尾元素的方法
const push = () => {
  list.push(list.length + 1)
}
// 定义点击 pop 按钮事件的处理函数 pop 删除数组末尾元素的方法
const pop = () => {
  list.pop()
}
</script>
<style lang="less" scoped></style>
